import Layout from '../../lib/components/Layout';
export default Layout;

# Getting Started

Floating UI is a low-level library for positioning "floating"
elements like tooltips, popovers, dropdowns, menus and more while
intelligently keeping them in view.

Challenges arise when positioning floating elements as they get
taken out of the normal layout flow of a document, leading to
issues with clipping and overflow, which is where this library
can help!

- **Tiny**: 600-byte core with highly modular architecture for
  tree-shaking
- **Low-level**: Granular control over positioning behavior
- **Pure**: Predictable and side-effect free
- **Extensible**: Powerful middleware system
- **Platform-agnostic**: Runs on any JavaScript environment which
  provides measurement APIs, including the web and
  [React Native](/docs/react-native)

```shell
npm install @floating-ui/dom
```

```shell
yarn add @floating-ui/dom
```

## CDN

Floating UI can be loaded via CDN using ESM or UMD format.

### ESM

```html
<script type="module">
  import * as FloatingUIDOM from 'https://cdn.skypack.dev/@floating-ui/dom@__DOM_VERSION__';
</script>
```

### UMD

```html
<script src="https://unpkg.com/@floating-ui/core@__CORE_VERSION__"></script>
<script src="https://unpkg.com/@floating-ui/dom@__DOM_VERSION__"></script>
```

All exports will be available on `window.FloatingUIDOM{:js}`.

## Tutorial

Get up and running with a real practical example by creating a
[tooltip](/docs/tutorial).
